<template>
  <div class="layout-bodyContent">
    <div class="layout-breadcrumb">
      <Breadcrumb>
        <Breadcrumb-item href="#">应用管理</Breadcrumb-item>
        <Breadcrumb-item href="#">友情链接</Breadcrumb-item>
      </Breadcrumb>
    </div>
    <div class="layout-content">
      <div class="friend-link-wrap">
        <div class="friend-link-head">
          <ButtonGroup>
            <Button type="ghost" icon="android-add">新增</Button>
            <Button type="ghost" icon="android-close">删除</Button>
            <Button type="ghost" icon="ios-compose-outline">修改</Button>
            <Button type="ghost" icon="android-search">查看</Button>
          </ButtonGroup>

          <Input icon="android-search" placeholder="Search something..." style="width: 300px" />
        </div>

        <div class="friend-link-table">
          <Table border stripe size="small" :disabledHover="true" :columns="columns6" :data="data5"></Table>
        </div>

        <div class="friend-link-page">
          <span class="page-totals">共 40 条记录</span>
          <Page :total="40" size="small" show-elevator show-sizer></Page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //网站名称	行业分类	百度权重	百度收录	域名年龄	反链	友链类型	更新时间	交换条件	操作
  export default {
    data () {
      return {
        columns6: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '用户',
            key: 'userName'
          }, {
            title: '网站名称',
            key: 'websiteName'
          },
          {
            title: '行业分类',
            key: 'industry'
          },
          {
            title: '更新时间',
            key: 'updateTime'
          }
        ],
        data5: [
          {
            userName: '罗胖胖',
            websiteName: 'https://www.baidu.com',
            industry: '博客',
            updateTime: '2017-12-25'
          },
          {
            userName: '罗胖胖',
            websiteName: 'https://www.baidu.com',
            industry: '博客',
            updateTime: '2017-12-25'
          }, {
            userName: '罗胖胖',
            websiteName: 'https://www.baidu.com',
            industry: '博客',
            updateTime: '2017-12-25'
          },
          {
            userName: '罗胖胖',
            websiteName: 'https://www.baidu.com',
            industry: '博客',
            updateTime: '2017-12-25'
          }
        ],
      }
    }
  }
</script>

<style lang="less">
  @friend-link: friend-link;
  .@{friend-link} {
    &-wrap {
      padding: 20px;
    }
    &-table {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    &-page,&-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

  }
</style>
